<template>
	<view style="background-color: #f9f3c1;min-height: 100vh;width: 100%;">
		<view style="padding: 10px; height: 100%;">
			<scroll-view scroll-x class="bg-white nav" style="margin-bottom: 15px;border-radius: 5px;">
				<view class="flex text-center">
					<view style="font-size: large;" class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tavtext" :key="index" @tap="tabSelect2" :data-id="index">
						{{item.text}}
					</view>
				</view>
			</scroll-view>
			<uni-section title="数据列表" type="line">
				<uni-collapse ref="collapse">
					<uni-collapse-item v-if="TabCur == 0" :title="item.title_mc" :show-animation="true"
					:key="index" v-for="(item,index) in gridlist">
						<view class="content">
							<view class="ddd"><view class="text" style="width: 30%;">订单时间</view><view class="text" style="width: 70%;">{{item._add_time_str}}</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">缴费类型</view><view class="text" style="width: 70%;">
								<view class="cu-capsule radius">
									<view class="cu-tag bg-cyan" v-if="item.jflx == '1'">老生缴费</view>
									<!-- <view class="cu-tag line-cyan">10:00</view> -->
								</view>
							</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">缴费状态</view><view class="text" style="width: 70%;">
								<view class="cu-capsule radius">
									<view class="cu-tag line-cyan" v-if="item.jfzt == '0'">未缴费</view>
									<view class="cu-tag bg-cyan" v-if="item.jfzt == '1'">已缴费</view>
								</view>
							</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">专业</view><view class="text" style="width: 70%;">{{item.zy}}</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">班级</view><view class="text" style="width: 70%;">{{item.bj}}</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">学费</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_xf)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">住宿费</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_zsf)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">教材费</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_jcf)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">城乡居民医保</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_cxjmyb)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">欠费</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_qk)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">补教材款</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_bjck)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">其他</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_qt)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">合计</view><view class="text" style="width: 70%;">
								{{vk.pubfn.priceFilter(item.total_fee_xf + item.total_fee_zsf + item.total_fee_jcf + item.total_fee_cxjmyb + item.total_fee_qt + item.total_fee_qk + item.total_fee_bjck)}}元
							</view></view>
							<view v-if="item.jfzt == '0'" class="ddd">
								<button style="width: 100%;" @click="gojf(item)" class="cu-btn bg-yellow margin-tb-sm lg">去缴费</button>
							</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item v-if="TabCur == 1" :title="item.title_mc" :show-animation="true"
					:key="index" v-for="(item,index) in gridlist1">
						<view class="content">
							<view class="ddd"><view class="text" style="width: 30%;">订单时间</view><view class="text" style="width: 70%;">{{item._add_time_str}}</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">订单号</view><view class="text" style="width: 70%;">{{item.out_trade_no}}</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">缴费类型</view><view class="text" style="width: 70%;">
								<view class="cu-capsule radius">
									<view class="cu-tag bg-cyan" v-if="item.jflx == '1'">老生缴费</view>
									<!-- <view class="cu-tag line-cyan">10:00</view> -->
								</view>
							</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">缴费状态</view><view class="text" style="width: 70%;">
								<view class="cu-capsule radius">
									<view class="cu-tag line-cyan" v-if="item.jfzt == '0'">未缴费</view>
									<view class="cu-tag bg-cyan" v-if="item.jfzt == '1'">已缴费</view>
								</view>
							</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">专业</view><view class="text" style="width: 70%;">{{item.zy}}</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">班级</view><view class="text" style="width: 70%;">{{item.bj}}</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">学费</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_xf)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">住宿费</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_zsf)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">教材费</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_jcf)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">城乡居民医保</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_cxjmyb)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">欠费</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_qk)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">补教材款</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_bjck)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">其他</view><view class="text" style="width: 70%;">{{vk.pubfn.priceFilter(item.total_fee_qt)}}元</view></view>
							<view class="ddd"><view class="text" style="width: 30%;">合计</view><view class="text" style="width: 70%;">
								{{vk.pubfn.priceFilter(item.total_fee_xf + item.total_fee_zsf + item.total_fee_jcf + item.total_fee_cxjmyb + item.total_fee_qt + item.total_fee_qk + item.total_fee_bjck)}}元
							</view></view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</uni-section>
		</view>
	</view>
</template>
<script>
	var vk = uni.vk;
	var _this;
	
	import uniCollapse from "@/pages_modules/components/uni-collapse/components/uni-collapse/uni-collapse";
	import uniCollapseItem from "@/pages_modules/components/uni-collapse/components/uni-collapse-item/uni-collapse-item";
	
	export default {
		components:{uniCollapseItem,uniCollapse},
		data() {
			return {
				options:{},
				value:['0'],
				tavtext:[{text: "未缴费订单"},{text: "已缴费订单"}],
				TabCur: 0,
				scrollLeft: 0,
				userInfo:{},
				gridlist:[],
				gridlist1:[],
				// init请求返回的数据
				data:{
					
				},
				// 表单请求数据
				form1:{
					
				},
				scrollTop:0,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		async onLoad(options = {}) {
			vk = uni.vk;
			_this = this;
			this.options = options
			console.log(this.options)
			await this.getlssj();
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		async onShow() {

		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			
		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {
			
		},
		onTabItemTap(item) {
			//this.dyxx()
		},
		// 函数
		methods: {
			gojf(item){
				item.total_fee = item.total_fee_xf + item.total_fee_zsf + item.total_fee_jcf + item.total_fee_cxjmyb + item.total_fee_qt + item.total_fee_qk + item.total_fee_bjck
				//console.log(item)
				uni.setStorageSync('qtjf_key',item);
				vk.navigateTo('/pages_modules/bdsj/wx-qtjf');
			},
			change(e) {
				console.log(e);
			},
			tabSelect2(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			getlssj(){
				return vk.callFunction({
					url: 'client/gsxy/tzxs/pub/tzxsapi.getqjflist',
					data: {zjhm:this.options.zjhm}
				}).then((data) => {
					this.gridlist = data.list.filter(function(item) {
					    return item.jfzt == '0';
					});
					this.gridlist1 = data.list.filter(function(item) {
					    return item.jfzt == '1';
					});
				}).catch((err) => {});
			}
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style lang="scss" scoped>
	.ddd{
		display: flex;flex-direction: row;flex-wrap: nowrap;width: 100%;margin: 10px 0px;
	}
	.leftr{
		position: relative;
		left: 30rpx;
	}
	
	.text-orange, .line-orange, .lines-orange {
	    color: #297849;
	}
	.imageIon {
		width: 95upx;
		height: 95upx;
	}
	.vvv{
		font-size: 14px;
		line-height: 3.0;
	}
  .footer-image {  
		height: auto;
		position: fixed;
		bottom: 0;
		width: 100%;
  }
  
  .content {
  	padding: 15px;
  }
  .text {
  	font-size: 14px;
  	color: #666;
  	line-height: 20px;
  }
</style>